<%@page import="Models.PrinterModel"%>
<%@page import="java.util.List"%>
<!DOCTYPE html> 
<html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <title>Network Status</title> 
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

   

</head> 
<body> 

   <div data-role="page" id="snmps-custom">

      <div data-role="header" data-theme="a">
      <h1>Network Status</h1>
      
   
   </div><!-- /header -->

   <div data-role="content" data-theme="c">
        <h2>Network Devices</h2>
		
            <table data-role="table" id="snmp-table-custom" data-mode="reflow" class="snmp-list table-stroke">
              <thead>
                <tr>
                  <th data-priority="1">Device ID</th>
                  <th data-priority="2">IP</th>
                  <th data-priority="3">Device Name</th>
                  <th data-priority="4">Port</th>
                  <th data-priority="5">Status</th>
                  <th data-priority="6">Jobs Completed</th>
                 
                </tr>
              </thead>
              <tbody>
               
                         
                  
                 <% 
                 
                 List<String> models = (List) request.getAttribute("PrinterModels");
                    for (int i =0; i<models.size(); i++)
                     {
                         out.println("<tr>");
                         out.println("<th>"+i+"</th>");
                         out.println("<td class="+'"' +"entry"+'"'+'>'+ models.get(0) +" </td>");
                         out.println("<td class="+'"' +"entry"+'"'+'>'+ models.get(1) +" </td>");
                         out.println("<td class="+'"' +"entry"+'"'+'>'+ models.get(2) +" </td>");
                         out.println("<td class="+'"' +"entry"+'"'+'>'+ models.get(3) +" </td>");
                         out.println("</tr>");
                     }
                     
                    %>
                
              
               
              
              </tbody>
            </table>

		<!-- We're using a style block to make it easy to view the custom styles -->
		<!-- In production, these should be added to an custom.css file loaded in the head -->

		<style>
		/*	These apply across all breakpoints because they are outside of a media query */
		/*	Make the labels light gray all caps across the board */
		.snmp-list thead th,
		.snmp-list tbody th .ui-table-cell-label,
		.snmp-list tbody td .ui-table-cell-label { 
			text-transform: uppercase; 
			font-size:.7em; 
			color:rgba(0,0,0,0.5);
			font-weight:normal;
		}
		/*	White bg, large blue text for rank and title */
		.snmp-list tbody th { 
			font-size:1.2em; 
			background-color:#fff;
			color:#77bbff;
			text-align:center;
		}
		/*	Add a bit of extra left padding for the title */
		.snmp-list tbody td.title { 
			padding-left:.8em;
                        color: #008080;
		}
                
                .snmp-list tbody td.entry { 
			padding-left:.8em;
                        
		}

		/*	Custom stacked styles for mobile sizes */
		/*	Use a max-width media query so we don't have to undo these styles */

		@media ( max-width: 40em ) {

			/*	Negate the margin between sections */
			.snmp-list tbody th {
				margin-top: 0;
				text-align:left;
			}
			/*	White bg, large blue text for rank and title */
			.snmp-list tbody th,
			.snmp-list tbody td.title { 
				display: block; 
				font-size:1.2em; 
				line-height:110%;
				padding:.5em .5em;
				background-color:#fff;
				color:#77bbff;
				-moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
			  	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
			  	box-shadow: 0 1px 6px rgba(0,0,0,.1);
			}
			/*	Hide labels for rank and title */
			.snmp-list tbody th .ui-table-cell-label,
			.snmp-list tbody td.title .ui-table-cell-label { 
				display: none; 
			}
			/*	Position the title next to the rank, pad to the left */
			.snmp-list tbody td.title {
				margin-top:-2.1em;
				padding-left:2.2em;
				border-bottom:1px solid rgba(0,0,0,.15);
			}
			/*	Make the data bold */
			.snmp-list th,
			.snmp-list td { 
				font-weight:bold;
			}
			/* Make the label elements a percentage width */ 
			.snmp-list td .ui-table-cell-label,
			.snmp-list th .ui-table-cell-label { 
				min-width: 20%; 
			}
		}
		
		/* Media query to show as a standard table at wider widths */ 
		@media ( min-width: 40em ) {
			/* Show the table header rows */ 
			.snmp-list td,
			.snmp-list th,
			.snmp-list tbody th,
			.snmp-list tbody td,
			.snmp-list thead td,
			.snmp-list thead th {
				display: table-cell;
				margin: 0;
			}
			/* Hide the labels in each cell */ 
			.snmp-list td .ui-table-cell-label,
			.snmp-list th .ui-table-cell-label { 
				display: none;
			}
		}
		</style>



           

         </div><!-- /content -->

          <div data-role="footer">
          <h1>Trinity College Dublin</h1> 
           <div data-role="navbar">
		<ul>
			<li><a href="http://www.tcd.ie/">Home</a></li>
			<li><a href="http://www.tcd.ie/">About</a></li>
                        <li><a href="http://www.tcd.ie/">TCD</a></li>
			
		</ul>
	</div>
      </div>

         </div><!-- /page -->

</body>
</html>






